<template>
	<el-container>
		<div style="width: 100%;height: 50px; margin-top: 5px; margin-bottom: 5px;display: flex;flex-wrap: nowrap;justify-content: space-evenly;align-items: center;">
			<div style="display: flex;align-items: center">
				<span>应用名称:</span>
				<el-select v-model="search.appName" placeholder="请选择应用" style="width: 150px;margin-left: 10px; "
					filterable clearable>
					<el-option v-for="(item, index) in appNameList" :key="index" :label="item.name"
						:value="item.name"></el-option>
				</el-select>
			</div>

			<div style="display: flex;align-items: center">
				<span>操作模块:</span>
				<el-input v-model="search.logModule" placeholder="请输入操作模块" style="margin-left: 10px; width: 150px"
					clearable></el-input>
			</div>
			<div style="display: flex;align-items: center">
				<span>操作人:</span>
				<el-input v-model="search.userName" placeholder="请输入操作人" style="margin-left: 10px; width: 180px"
					clearable></el-input>
			</div>

			<div style="display: flex;align-items: center">
				<span>请求时间:</span>
				<el-date-picker style="width: 220px;margin-left: 10px; " v-model="dateValue" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</div>

			<div style="display: flex;">
				<el-button type="primary" @click="upsearch">查询</el-button>
				<el-button type="" @click="cleanSearch">清空</el-button>
				<el-button type="primary" style="width: 100px;margin-right: 10px;" @click="exportDetail">导出</el-button>
			</div>
		</div>

		<div class="search-box">
			<div class="panel-search-box">
				<scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出"
					hideButton>
				</scFileExport>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :params="params" border stripe remoteSort remoteFilter
				@selection-change="selectionChange">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column label="应用名称" prop="appName" align="center" min-width="150"></el-table-column>
				<el-table-column label="片区" prop="orgName" align="center" min-width="150"></el-table-column>
				<el-table-column label="操作模块" prop="logModule" align="center" min-width="150"></el-table-column>
				<el-table-column label="请求IP" prop="requestIp" align="center" min-width="150"></el-table-column>
				<el-table-column label="角色名称" prop="roleName" align="center" min-width="150"></el-table-column>
				<el-table-column label="请求时间" prop="logTime" align="center" min-width="150"></el-table-column>
				<el-table-column label="操作人" prop="userName" align="center" min-width="150"></el-table-column>
			</scTable>
		</el-main>
		<!-- <el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
			<tasks></tasks>
		</el-drawer> -->
	</el-container>
</template>

<script>
export default {
	name: 'opLog',
	data() {
		return {
			dateValue: "",
			dialog: {
				info: false
			},
			search: {},
			apiObj: this.$API.log.opLogList,
			params: {},
			appNameList: [
				{
					id: 1,
					name: '中台管理'
				},
				{
					id: 2,
					name: '活动赋能'
				},
				// {
				// 	id: 3,
				// 	name: '客户赋能'
				// }
				{
					id: 3,
					name: '员工助手'
				},
				{
					id: 4,
					name: '观星台'
				},
				// {
				// 	id: 4,
				// 	name: '数据看板'
				// }
			],
			deriveExcel: this.$API.log.download,//导出的API
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() { },
	async created() { },
	methods: {
		//导出
		async exportDetail() {
			this.$refs.scFileExport.open()
			console.log('导出参数',this.search);
		},
		//任务
		downTemp() {
			// 下载模板
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},

		upsearch() {
			// 日期格式化
			if (this.dateValue) {
				this.search.startTime = this.newDate(this.dateValue[0])
				this.search.endTime = this.newDate(this.dateValue[1])
			}
			this.$refs.table.upData(this.search)
		},
		
		// 日期格式化
		newDate(dateString) {
			let date = new Date(dateString);
			let year = date.getFullYear();
			let month = ("0" + (date.getMonth() + 1)).slice(-2);
			let day = ("0" + date.getDate()).slice(-2);
			let formattedDate = `${year}-${month}-${day}`;
			return formattedDate
		},

		cleanSearch() {
			this.dateValue = ''
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
